<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String path=request.getContextPath();%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
	<head>
		<meta charset="UTF-8">
<meta name="author" content="order by dede58.com"/>
		<title>员工列表</title>
		<jsp:include page="common.jsp"/>
	</head>
	<body>
		<div class="main_box">
			<h2><span></span>客户列表</h2>
			<div class="cont_box">
				<form action="#" method="post" id="staff_form">
					<div class="search_formbox clearfix">
						<button type="button" id="all" class="btn blue_btn" onclick="add()">添加客户</button>
					</div>
					<table border="0" cellspacing="0" cellpadding="0" class="table" id="table_box">
					<thead>
						<tr>
							<th>客户编号</th>
							<th>姓名</th>
							<th>身份证号</th>
							<th>座机号码</th>
							<th>手机电话</th>
							<th>余额</th>
							<th width="268">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr id="1"><!--此处id为进行编辑或查看时该条数据的唯一标识-->
							<td>1</td>
							<td>张三</td>
							<td>2000023213043224024</td>
							<td>5535343</td>
							<td>18653624789</td>
							<td>1000</td>
							<td>
								<button type="button" style="margin: 0px 5px 0px 0px" href="javascript:void(0);" onclick="editor(${one.id})"   class="table_btn blue_btn">编辑</button>

								<button type="button" style="margin: 0px 5px 0px 0px" href="javascript:void(0);" onclick="del(${one.id})"   class="table_btn table_del del_btn">删除</button>

							</td>
						</tr>
						<c:forEach  items="${customerList}" var="one" varStatus="n">
							<tr id="b_${one.id}"><!--此处id为进行查看该会员相关信息时，当前数据的唯一标识-->
								<td class="id">${one.id}</td>
								<td class="name">${one.name}</td>
								<td class="card1">${one.card}</td>
								<td class="phone">${one.phone}</td>
								<td class="mobile">${one.mobile}</td>
								<td class="remainder">${one.remainder}</td>
								<td>
									<button type="button" style="margin: 0px 5px 0px 0px" href="javascript:void(0);" onclick="editor(${one.id})"   class="table_btn blue_btn">编辑</button>

									<button type="button" style="margin: 0px 5px 0px 0px" href="javascript:void(0);" onclick="del(${one.id})"   class="table_btn table_del del_btn">删除</button>

									</a>
								</td>
							</tr>
						</c:forEach>
					</tbody>
					</table>
				</form>
			</div>
<%--添加客户模态框			--%>
			<div>
				<div class="modal fade" id="addModal">
					<div class="modal-dialog">
						<div class="modal-content">

							<div class="modal-header">
								<h5 class="modal-title">添加用户信息</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>

							<div class="modal-body">
								<form action="#" method="post" id="add_form">
									<ul class="addpro_box adduser_box">
										<li>
											<label>客户名：</label>
											<input type="text" placeholder="请输入客户名" name="name"  id="name" data-msg-required="客户名不能为空" style="height: 35px;margin-right:15px;"/>
										</li>
										<li>
											<label>身份证号：</label>
											<input type="text" placeholder="请输入身份证号" name="card" id="card" data-msg-required="身份证号不能为空" style="height: 35px;margin-right:15px;"/>
										</li>
										<li>
											<label>座机号码：</label>
											<input type="text" placeholder="请输入座机号码" name="phone" id="phone" data-msg-required="座机号码不能为空" style="height: 35px;margin-right:15px;"/>
										</li>
										<li>
											<label>手机号码：</label>
											<input type="text" placeholder="请输入手机号码" name="mobile" id="mobile" data-msg-required="手机号码不能为空" style="height: 35px;margin-right:15px;"/>
										</li>
										<li>
											<label>余额：</label>
											<input type="text" placeholder="请输入余额" name="remainder" id="remainder"  style="height: 35px;margin-right:15px;"/>
										</li>
									</ul>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
								<button type="submit" class="btn btn-primary"  onclick="add_do()">确认</button>
							</div>

						</div>
					</div>
				</div>
			</div>
<%--编辑用户模态框					--%>
			<div>
				<div class="modal fade" id="editorModal">
					<div class="modal-dialog">
						<div class="modal-content">

							<div class="modal-header">
								<h5 class="modal-title">编辑用户信息</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>

							<div class="modal-body">
								<form action="#" method="post" id="editor_form">
									<ul class="addpro_box adduser_box">
										<li>
											<label>客户编号：</label>
											<input type="text" placeholder="${id}"  value="${id}"name="id2"  id="id2"disabled="disabled"  style="height: 35px;margin-right:15px;"/>
										</li>
										<li>
											<label>客户名：</label>
											<input type="text" placeholder="${name}"  value="${name}"name="name2"  id="name2" data-msg-required="客户名不能为空" style="height: 35px;margin-right:15px;"/>
										</li>
										<li>
											<label>身份证号：</label>
											<input type="text" placeholder="${card}"  value="${card}" name="card2" id="card2" data-msg-required="身份证号不能为空" style="height: 35px;margin-right:15px;"/>
										</li>
										<li>
											<label>座机号码：</label>
											<input type="text" placeholder="${phone}"  value="${phone}"name="phone2" id="phone2" data-msg-required="座机号码不能为空" style="height: 35px;margin-right:15px;"/>
										</li>
										<li>
											<label>手机号码：</label>
											<input type="text" placeholder="${mobile}"  value="${mobile}" name="mobile2" id="mobile2" data-msg-required="手机号码不能为空" style="height: 35px;margin-right:15px;"/>
										</li>
										<li>
											<label>余额：</label>
											<input type="text" placeholder="${remainder}"  value="${remainder}" name="remainder2" id="remainder2"  style="height: 35px;margin-right:15px;"/>
										</li>
									</ul>
								</form>
							</div>

							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
								<button type="submit" class="btn btn-primary"  onclick="editor_do()">确认</button>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			function add() {
				$("#addModal").modal("show");
			}
			function add_do() {
				$.ajax({
					url:"<%=path%>/customer/add",
					method:"post",
					dataType:"JSON",
					data:{
						name:$("#name").val(),
						card:$("#card").val(),
						phone:$("#phone").val(),
						mobile:$("#mobile").val(),
						remainder:$("#remainder").val()
					},
					success:function (data) {
						if (data>0)alert("添加成功！！")
						else alert("添加失败！！")
						location.reload()
					},
					error:function (e) {
						alert("通讯失败")

					}
				});
			}
			//发送删除请求
			function del(id) {
				//获取id
				//发送ajax请求 进行删除操作  并返回删除数
				$.ajax({
					url:"<%=path%>/customer/delete",
					method:"post",
					dataType:"JSON",
					data:{
						card:$("#b_"+id+" .card1").text(),
					},
					success:function (data) {
						if (data>0)alert("成功删除")
						else alert("删除失败")
						location.reload()
					},
					error:function (e) {
						alert("通讯失败")
					}
				})
			}
			function editor(id) {
				//获取当前页面的数据  加入模态框显示
				$("#editorModal").modal("show");
				$("#id2").val($("#b_"+id+" .id").text());
				$("#name2").val($("#b_"+id+" .name").text());
				$("#card2").val($("#b_"+id+" .card1").text());
				$("#phone2").val($("#b_"+id+" .phone").text());
				$("#mobile2").val($("#b_"+id+" .mobile").text());
				$("#remainder2").val($("#b_"+id+" .remainder").text());
			}
			function editor_do() {
				//获取当前已修改的编辑模态框数据
				//发送ajax请求  进行更新操作 并返回更新数
				// alert($("#floorId2").val()+"////"+$("#state2").val())
				//发送ajax请求  进行添加操作 并返回添加数
				$.ajax({
					url:"<%=path%>/customer/update",
					method:"post",
					dataType:"JSON",
					data:{
						// id:$("#id2").valid(),
						name:$("#name2").val(),
						phone:$("#phone2").val(),
						mobile:$("#mobile2").val(),
						remainder:$("#remainder2").val(),
						card:$("#card2").val(),
					},
					success:function (data) {
						if (data>0)alert("更新成功！！")
						else alert("更新失败！！")
						location.reload()
					},
					error:function (e) {
						alert("通讯失败")

					}
				});
			}
		</script>
		<!--javascript include-->
		<script src="../../js/jquery-2.2.1.min.js"></script>
		<script src="../../js/jquery.dataTables.min.js"></script>
		<script src="../../js/bootstrap-datepicker.js"></script>
		<script src="../../js/jquery.validate.min.js"></script>
		<script src="../../js/bootstrap-datepicker.js"></script>
		<script src="../../js/other.js"></script>
		<script>
			$(function(){
				$("body").other({tableId:"#table_box",tableWrap:[1,7],tableAas:[ 0,"desc"],tableSearch:true});
				$("body").tipWindow({method:"edit",type:"form",Class:".edit_btn",even:"click",tipTit:"编辑员工信息",Twidth:"700",Theight:"460",editUrl:"edit_Staff.html"});//editUrl 编辑员工信息请求地址
				$("body").tipWindow({method:"edit",type:"form",Class:".see_btn",even:"click",tipTit:"员工业绩",Twidth:"998",Theight:"600",editUrl:"staff_Achievement.html"});//editUrl 员工业绩请求地址
				//员工筛选
				$(".search_formbox .btn").click(function(){
					var dataId = $(this).prop("id"),//员工状态id
						that = $(this);
					$.ajax({
						type:"post",
						url:"#",
						data:{"id":dataId},
						success:function(data){
							that.addClass("curr").siblings().removeClass("curr");
						}
					});
				});
			});
		</script>
	</body>
</html>
